<script setup>
import { ref, onMounted } from 'vue';

const props=defineProps({
    mapData:Array
})

// const data = []


const chinaMap = ref(null);

// 在组件挂载后渲染中国地图
onMounted(async() => {
    props.mapData.forEach((i) => {
        i.name=i.name.replace("市","")
    })
    const chartDom = chinaMap.value
    if (!chartDom) return;

    // eslint-disable-next-line no-undef
    const myChart = echarts.init(chartDom);
    // 初始地图配置项 - 中国地图
    const optionChina = {
        grid: {
            containLabel: true
        },
        series: [{
            type: 'map',
            map: 'china',
            itemStyle: {
                normal: {
                    borderColor: "white",
                    borderWidth: "1",
                    areaColor: "rgb(238,238,238)",
                },
                emphasis: {
                    areaColor: 'rgb(120,223,252)',
                }
            },
            data: props.mapData
        }],
        tooltip: {
            show: 'true',
            trigger: "item",
        },
        visualMap: {
            min: 0,
            max: props.mapData[0].value,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange:{
                color: ['rgb(238,238,238)','rgb(52,100,224)']
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
    }
    myChart.setOption(optionChina);
});
</script>


<template>
    <div>
        <Page title="访问地区">
            <template #default>
                <div class="line_body">
                    <div class="left">
                        <h3>Top 10 省份</h3>
                        <ul>
                            <li v-for="(i,index) in props.mapData" :key="i+'ccc'">
                                <span>{{ index+1+'. '+ i.name }}</span>
                                <span>{{ i.value }}次</span>
                            </li>
                        </ul>
                    </div>
                    <div ref="chinaMap" class="chinaMap" style="width: 450px;height: 380px;"></div>
                </div>
            </template>
        </Page>
    </div>
</template>

<style lang="scss" scoped>
.line_body{
    display: flex;
    justify-content: space-between;
    .left{
        h3{
            margin-top: 30px;
            color: rgb(52,100,224);
        }
        ul{
            li{
                width: 180px;
                margin: 8px 10px;
                padding-bottom: 5px;
                display: flex;
                justify-content: space-between;
                border-bottom: 2px dashed rgb(238,238,238);
            }
        }
    }
}
</style>
